<script setup>
import { ref, reactive, watch } from "vue";
import { UploadFilled, InfoFilled, Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { setImg } from "../../utils/setImg";
import {
  getActivityCategoryList,
  addActivityCategoryList,
  delActivityCategoryList,
  modifyActivityCategoryList,
} from "../../api/require";
import Tag from '../../pages/Tag.vue'
const activityCategoryList = ref([]);
const flag = ref(0);
const putId = ref("");
const total = ref();
//控制弹出框
const dialogFormVisible = ref(false);
const formLabelWidth = "60px";
const dialogVisible = ref(false);
const currentData = ref({});
const form = reactive({
  name: "",
  desc: "",
});
const currentPage = ref(1);
const resData = () => {
  form.name = "";
  imageUrl.value = "";
  form.desc = "";
};
//获取数据
const getData = (page = 1) => {
  getActivityCategoryList(page).then((res) => {
    console.log(res.data);
    total.value = res.data.total;
    activityCategoryList.value = res.data.data;
    //添加索引
    activityCategoryList.value.forEach((item, index) => {
      item.index = index + 1;
    });
  });
};
getData();
//删除
const handleDelete = (id) => {
  delActivityCategoryList(id).then((res) => {
    console.log(res);
    getData();
  });
};
const savaData = () => {
  //console.log(form.name);
  if (!form.name || !form.desc) {
    ElMessage({
      message: "输入不能为空",
      type: "warning",
    });
  } else {
    if (flag.value == 1) {
      //修改
      modifyActivityCategoryList(putId.value, {
        name: form.name,
        coverImage: imageUrl.value,
        desc: form.desc,
      }).then((res) => {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        resData();
        getData();
        dialogFormVisible.value = false;
        flag.value == 0;
      });
    } else {
      addActivityCategoryList({
        name: form.name,
        coverImage: imageUrl.value,
        desc: form.desc,
      }).then((res) => {
        ElMessage({
          message: "添加成功",
          type: "success",
        });
        resData();
        getData();
        dialogFormVisible.value = false;
      });
    }
    //console.log(file.url);
  }
};
const imageUrl = ref("");
const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = response.data;
  //console.log(response);
  //console.log(uploadFile);
};
//修改
const handleClick = (id) => {
  //根据id获取数据
  //console.log(id);
  currentData.value = activityCategoryList.value.filter(
    (item) => item.id == id
  );
  putId.value = id;
  //console.log(currentData.value[0]);
  dialogFormVisible.value = true;
  form.name = currentData.value[0].name;
  imageUrl.value = currentData.value[0].coverImage
    ? setImg(currentData.value[0].coverImage)
    : "http://127.0.0.1:5173/index.jpg";
  form.desc = currentData.value[0].desc;
  //修改flag为1
  flag.value = 1;
};
//分页器
const handleCurrentChange = (page) => {
  //获取这一页数据展示
  //console.log(page);
  currentData.value = page;
  getData(page);
};
watch(dialogFormVisible, (val) => {
  //console.log(val);
  if (!val) {
    resData();
  }
});
</script>
<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>
      <router-link :to="{ name: 'Index' }">活动管理</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>分类管理</el-breadcrumb-item>
  </el-breadcrumb>
  <h1 style="margin-top: 10px">分类</h1>
  <!-- 表格 -->
  <Tag></Tag>
  <div class="table-main">
    <div class="table-main-head">
      <span>活动分类</span>
      <el-button
        class="right"
        type="success"
        :icon="Plus"
        @click="dialogFormVisible = true"
        size="default"
        >增加
      </el-button>
    </div>
    <el-table
      :default-sort="{ prop: 'index', order: 'ascending' }"
      :data="activityCategoryList"
      stripe
      style="width: 100%"
      border
    >
      <el-table-column
        prop="index"
        sortable
        label="序号"
        align="center"
        width="140"
      />
      <el-table-column prop="name" label="名字" align="center" width="280" />
      <el-table-column prop="" label="图片" align="center" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img
              :src="
                scope.row.coverImage
                  ? setImg(scope.row.coverImage)
                  : 'index.jpg'
              "
              class="imgLeft"
              align="center"
              alt=""
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="描述" align="center" width="280" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleClick(scope.row.id)"
            >修改</el-button
          >
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="你是否确认删除?"
            @confirm="handleDelete(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    title="添加活动"
  >
    <el-form :model="form">
      <el-form-item label="名字" :label-width="formLabelWidth">
        <el-input v-model="form.name" id="inp1" autocomplete="off" />
      </el-form-item>
      <el-form-item label="简介" :label-width="formLabelWidth">
        <el-input v-model="form.desc" type="textarea" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:1337/api/v1/common/upload_file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="imageUrl"
            :src="imageUrl ? setImg(imageUrl) : 'index.jpg'"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="savaData">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <el-pagination
    :background="true"
    v-model:currentPage="currentPage"
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
    :total="total"
  />
</template>
<style scoped lang="scss">
.table-main {
  background-color: #fff;
}

img {
  width: 60px;
}

.table-main-head {
  padding: 20px 0;
  padding-left: 20px;
}

.right {
  float: right;
  margin-right: 10px;
}

.imgLeft {
  margin-left: 50px;
}
</style>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  width: 150px;
}

.el-pagination {
  margin-top: 20px;
  padding-left: 500px;
}
</style>
